<template>
    <ul>
        <li :style="{opacity:clarity}">欢迎学习Vue </li>
        <li>news001 <input type="text"></li>
        <li>news002 <input type="text"></li>
        <li>news003 <input type="text"></li>
    </ul>
</template>

<script>
    export default {
        name:'News',
        data(){
            return{
                clarity:1,
            }
        },
        // mounted(){
        //    this.timer = setInterval(() => {
        //         console.log('@');
        //         this.clarity -= 0.01 ;
        //         if(this.clarity <= 0){
        //             this.clarity = 1 ;
        //         }
        //     }, 16);
        // },
        // beforeDestroy(){
        //     clearInterval(this.timer);
        //     console.log('News即将销毁');
        // },
        // 组件被激活
        activated(){
             this.timer = setInterval(() => {
                this.clarity -= 0.01 ;
                if(this.clarity <= 0){
                    this.clarity = 1 ;
                }
            }, 16);
        },
        // 组件失活
        deactivated(){
            clearInterval(this.timer);
        }

    }
</script>

<style>

</style>